<template>
    <el-form :model="form" label-width="120px" ref="add-form">
        <el-form-item label="所属门店">
            <el-select v-model="form.shopId" clearable placeholder="不选择">
                <el-option :label="item.name" v-for="item in shop" :key="item.id" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="分类" prop="categoryId" :rules="[{required:true,message:'不能为空'}]">
            <el-select v-model="form.categoryId" placeholder="不选择">
                <el-option :label="item.name" v-for="item in news" :key="item.id" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model="form.keywords" />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
            <el-input v-model="form.tags" />
        </el-form-item>
        <el-form-item label="摘要" prop="descript" :rules="[{required:true,message:'不能为空'}]">
            <el-input type="textarea" v-model="form.descript" />
        </el-form-item>
        <el-form-item label="封面图片" prop="pics">
            <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
                :on-change="handleChange">
                <img style="width:100px;" v-if="form.pics" :src="form.pics" class="avatar" />
                <el-button v-else type="warning">上传图片</el-button>
            </el-upload>
            <el-input style="display:none;" v-model="form.pics" autocomplete="off" />
        </el-form-item>
        <el-form-item label="视频地址" prop="video">
            <el-input v-model="form.video" />
        </el-form-item>
        <el-form-item label="音频地址" prop="audio">
            <el-input v-model="form.audio" />
        </el-form-item>
        <el-form-item label="来源" prop="income">
            <el-input v-model="form.income" />
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" />
        </el-form-item>
        <el-form-item label="是否推荐" prop="isRecommend" :rules="[{required:true,message:'不能为空'}]">
            <el-radio-group v-model="form.isRecommend">
                <el-radio :label="true">推荐</el-radio>
                <el-radio :label="false">不推荐</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status" :rules="[{required:true,message:'不能为空'}]">
            <el-radio-group v-model="form.status">
                <el-radio :label="2">审核通过</el-radio>
                <el-radio :label="0">待审核</el-radio>
                <el-radio :label="1">审核不通过</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="签到类型" prop="signType" :rules="[{required:true,message:'不能为空'}]">
            <el-radio-group v-model="form.signType">
                <el-radio :label="0">线上签到</el-radio>
                <el-radio :label="1">线下签到</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="签到送积分" prop="signScoreSend">
            <el-input v-model="form.signScoreSend" />
        </el-form-item>
        <el-form-item label="活动地址" prop="address">
            <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="排序" prop="paixu" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model="form.paixu" />
        </el-form-item>
        <el-form-item label="内容" prop="content" :rules="[{required:true,message:'不能为空'}]">
            <!-- <Tinymce :value="form.content" @input="form.content = $event" style="width:100%;"></Tinymce> -->
            <Tinymce v-model="form.content" style="width:100%;"></Tinymce>
            <!-- <el-input v-model="form.content"></el-input> -->
        </el-form-item>
        <el-form-item label="关联商品">
            <el-button>选择商品</el-button>
        </el-form-item>
        <el-form-item label="关联投票">
            <el-button>选择投票项目</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { shopList } from "../api/goods"
import { newsCategoryList, articleAdd,articleInfo } from "../api/news"
import { uploadFile } from "../api/index"
import Tinymce from "../views/Tinymce.vue"
export default {
    components:{Tinymce},
    data() {
        return {
            form: {
                shopId: "",//	所属门店
                title: "",//标题
                categoryId: "",//分类
                keywords: "",//	关键词
                tags: "",//	标签
                descript: "",//	摘要/ 描述
                pics: "",//封面图片
                video: "",//视频地址
                audio: "",//音频地址
                income: "",//来源
                author: "",//作者
                isRecommend: false,//是否推荐	true推荐/ false不推荐
                status: 2,//状态	2审核通过 / 0待审核 / 1审核不通过
                signType: 1,//	签到类型   0线上签到 / 1线下签到
                signScoreSend: "0",//签到送积分
                address: "",//活动地点
                paixu: "0",//排序
                content: "",//内容
                goodsIds: "",//	关联商品
                voteIds: "",//关联投票
            },
            shop: [],//商店列表
            news: [],//文章分类
        }
    },
    methods: {
        // 提交
        onSubmit() {
            this.$refs["add-form"].validate(val => {
                // console.log(val)
                if (val) {
                    articleAdd(this.form).then(res => {
                        // console.log(res)
                        if (res.code === 0) {
                            this.$message({
                                type:"success",
                                message:"修改成功",
                                duration:1000,
                            })
                            this.$router.push("/article");
                        }
                    })
                }
            })
        },
        // 通过id获取文章详情
        getArticleInfo(id){
            articleInfo({id}).then(res=>{
                console.log(res)
                if(res.code === 0){
                    this.form = res.data.info
                    if(res.data.pics[0]){
                        this.form.pics = res.data.pics[0].pic
                    }
                    this.form["deleteOldPics"]  = true
                }
            })
        },

        // 获取商店列表
        getShops() {
            shopList().then(res => {
                // console.log(res)
                if (res.code === 0) {
                    this.shop = res.data.result
                }
            })
        },
        // 获取文章分类
        getNewsCategory() {
            newsCategoryList().then(res => {
                if (res.code === 0) {
                    this.news = res.data
                }
            })
        },
        //文件改变时执行的钩子函数
        handleChange(val) {
            // console.log(val)
            const formData = new FormData();
            formData.append("upfile", val.raw)
            uploadFile(formData).then(res => {
                // console.log(res)
                this.form.pics = res.data.url
            })
        }
    },
    created() {
        this.getShops()
        this.getNewsCategory()
        // console.log(this.$route)
        if(this.$route.query.id){
            this.getArticleInfo(this.$route.query.id)
        }
    }
}
</script>

<style scoped>

</style>